<template>
	<view class="list flex column">
		<template v-for="(v,k) in newList">
			<view class="list-item flex just-between align-center" :style="marginLeft" @click="$emit('detail',v)">
				<view class="list-item-left flex align-center">
					<template v-if="layer<3">
						<image class="open-img" :src="$staticImagePath('/publish/open.png')" v-if="v.show == false"
							@click.stop="changeOpen(v)"></image>
						<image class="open-img" :src="$staticImagePath('/publish/close.png')" v-else
							@click.stop="changeOpen(v)"></image>
					</template>
					<template v-else>
						<!-- 占位 -->
						<view class="open-img"></view>
					</template>
					<image class="list-item-img" :src="$getImageURL(v.image)"></image>
					<view class="flex column just-between">
						<view>{{v.name}}</view>
						<view class="add-sub-btn" @click.stop="add(v.id)" v-if="layer<3">+添加子分类</view>
					</view>
				</view>
				<image class="del-img" @click.stop="del(k)" :src="$staticImagePath('/common/delete1.png')"></image>
			</view>
			<list v-show="v.show" :list="v.children" :layer="layer+1" @detail="$emit('detail',$event)"></list>
			<!-- <view v-if="!v.children.length && v.show" class="flex align-center just-center">暂无数据～</view> -->
		</template>
	</view>
</template>

<script>
	import {
		delShopCategory
	} from '@/API/business.js'
	import list from './list'
	export default {
		components: {
			list
		},
		props: {
			list: {
				type: Array,
				default: () => {
					return []
				}
			},
			layer: {
				type: Number,
				default: 1
			}
		},
		computed: {
			marginLeft() {
				return 'padding-left:' + this.layer * 30 + 'rpx'
			}
		},
		data() {
			return {
				newList: []
			}
		},
		mounted(){
			this.init()
		},
		methods: {
			init() {
				this.newList = this.list.map(v => {
					v.show = false
					return v
				})
			},
			changeOpen(item) {
				item.show = !item.show
			},
			add(pid = 0) {
				uni.navigateTo({
					url: '/pages/business/category/detail?pid=' + pid
				})
			},
			del(index) {
				uni.showModal({
					title: '确认删除？',
					success: res => {
						if (res.confirm) {
							delShopCategory({
								ids: this.list[index].id
							}).then(res => {
								this.newList.splice(index, 1)
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.list {
		gap: 10rpx;

		&-item {
			background-color: #fff;
			border-radius: 20rpx;
			padding: 20rpx;

			&-img {
				width: 70rpx;
				height: 70rpx;
				border-radius: 100%;
			}

			&-left {
				gap: 20rpx;

				.open-img {
					width: 30rpx;
					height: 30rpx;
				}

				.add-sub-btn {
					color: #629eff;
					margin-top: 20rpx;
				}
			}

			.del-img {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}
</style>